#@Author: bjy @Date: 2019/4/17 15:57 @Version 1.0#
<template>
    <div class="activityWonderful">
      <div style="background: #fff; padding-bottom: 10px;">
        <!-- 页面标题 -->
          <div class="activityWonderful-left-title">
            <h2>{{pageTitle}}</h2>
          </div>
        <div class="activity-title-line"></div>
        <!-- 页面按钮 -->
        <div class="activity-div-button">
          <el-button type="primary" plain  class="activity-button" @click="addReview">新增回顾</el-button>
          <el-button type="primary" plain  class="activity-button" @click="editorialPublished">编辑发布</el-button>
          <el-button type="primary" plain  class="activity-button" @click="cancelPublished">取消发布</el-button>
        </div>
        <!-- table表格 -->
        <div class="activity-table">
          <el-table :data="tableData" highlight-current-row @current-change="handleTableChange" ref="singleTable"
            border style="width: 98%;margin:0 1%" height="600">
            <el-table-column prop="real_name" label="活动发起支部" width="180"></el-table-column>
            <el-table-column prop="activitytitle" label="活动名称" width="180"></el-table-column>
            <el-table-column prop="categoryintegral" label="活动签到积分"></el-table-column>
            <el-table-column prop="activitystarttime" label="活动开始时间"></el-table-column>
            <el-table-column prop="activityendtime" label="活动结束时间"></el-table-column>
            <el-table-column prop="activitysitename" label="活动地点"></el-table-column>
            <el-table-column prop="activitynumber" label="面向人数"></el-table-column>
            <el-table-column prop="categoryname" label="活动类型"></el-table-column>
            <el-table-column prop="activitystatus" label="活动状态"></el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div style="width: 100%;text-align: center; margin: 5px auto ">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :total="total"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
        <!--历史活动列表-->
        <div>
          <el-dialog title="历史活动列表" :visible.sync="dialogReviewActivityTableVisible" :before-close="closeReviewActivityDialog" width="80%">
            <div class="activity-div-button">
              <el-button type="primary" plain  class="activity-button" @click="addReviewThisActivity">新增回顾</el-button>
            </div>
            <!--列表-->
            <div>
              <el-table :data="tableDataReviewActivity" highlight-current-row @current-change="handleTableChangeReviewActivity" ref="singleTable"
                      border style="width: 98%;margin:0 1%" height="600">
              <el-table-column prop="real_name" label="活动发起支部" width="180"></el-table-column>
              <el-table-column prop="activitytitle" label="活动名称" width="180"></el-table-column>
              <el-table-column prop="categoryintegral" label="活动签到积分"></el-table-column>
              <el-table-column prop="activitystarttime" label="活动开始时间"></el-table-column>
              <el-table-column prop="activityendtime" label="活动结束时间"></el-table-column>
              <el-table-column prop="activitysitename" label="活动地点"></el-table-column>
              <el-table-column prop="activitynumber" label="面向人数"></el-table-column>
              <el-table-column prop="categoryname" label="活动类型"></el-table-column>
              <el-table-column prop="activitystatus" label="活动状态"></el-table-column>
            </el-table>
            </div>
            <!--分页-->
            <div style="width: 100%;text-align: center; margin: 5px auto ">
              <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="ReviewActivityTotal"
                @current-change="handleReviewActivityCurrentChange">
              </el-pagination>
            </div>
          </el-dialog>
        </div>
        <!--新增回顾添加页面-->
        <div>
          <el-dialog
            width="40%"
            title="新增回顾"
            :visible.sync="addReleaseActivityVisible"
            append-to-body :before-close="closeInnerReviewActivityDialog">
            <el-form :model="addReleaseActivityForm" ref="addReleaseActivityForm">
              <tr>
                <td colspan="2">
                  <el-form-item label="活动地点" :label-width="formLabelWidth" prop="activityAddress">
                    <el-input v-model="addReleaseActivityForm.activityAddress" autocomplete="off"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <el-form-item label="活动标题名称" :label-width="formLabelWidth">
                    <el-input v-model="addReleaseActivityForm.activityTitle" autocomplete="off"></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="活动开始时间" :label-width="formLabelWidth" prop="activityStartTime">
                    <el-input v-model="addReleaseActivityForm.activityStartTime" autocomplete="off"></el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="活动结束时间" :label-width="formLabelWidth" prop="activityEndTime">
                    <el-date-picker
                      v-model="addReleaseActivityForm.activityEndTime"
                      type="datetime"
                      placeholder="选择日期时间"
                      default-time="12:00:00">
                    </el-date-picker>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="所属支部/党委" :label-width="formLabelWidth" prop="organization">

                    <el-select v-model="addReleaseActivityForm.organization" placeholder="请选择活动支部/党委">
                      <el-option
                        v-for="item in optionsOrganizationArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>

                </td>
                <td>
                  <el-form-item label="活动类型" :label-width="formLabelWidth" prop="activityType">
                    <el-select v-model="historicalActivityForm.activityType" placeholder="请选择活动类型">
                      <el-option
                        v-for="item in activityTypeArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <NavUeditor :config=ueConfig id="addReleaseActivity" ref="activityWonderfulUeditor"></NavUeditor>
                </td>
              </tr>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="goBack()">返 回</el-button>
              <el-button @click="closeInnerReviewActivityDialog()">取 消</el-button>
              <el-button type="primary" @click="formSubmintReviewActivity()">确 定</el-button>
            </div>
          </el-dialog>
        </div>

        <!--编辑发布弹窗-->
        <div>
          <el-dialog title="编辑发布" :visible.sync="dialogHistoricalActivityFormVisible" :before-close="closeDialog">
            <el-form :model="historicalActivityForm" ref="form">
              <tr>
                <td colspan="2">
                  <el-form-item label="活动地点" :label-width="formLabelWidth" prop="activityAddress">
                    <el-input v-model="historicalActivityForm.activityAddress" autocomplete="off"></el-input>
                  </el-form-item>
                </td>
              </tr>
            <tr>
              <td colspan="2">
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                  <el-input v-model="historicalActivityForm.activityTitle" autocomplete="off"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="活动开始时间" :label-width="formLabelWidth" prop="activityStartTime">
                  <el-date-picker
                  v-model="historicalActivityForm.activityStartTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="12:00:00">
                </el-date-picker>
                </el-form-item>
              </td>
              <td>
                <el-form-item label="所属支部/党委" :label-width="formLabelWidth" prop="organization">
                <el-select v-model="historicalActivityForm.organization" placeholder="请选择活动支部/党委">
                  <el-option
                    v-for="item in optionsOrganizationArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="活动结束时间" :label-width="formLabelWidth" prop="activityEndTime">
                  <el-date-picker
                    v-model="historicalActivityForm.activityEndTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    default-time="12:00:00">
                  </el-date-picker>
                </el-form-item>
              </td>
              <td>
                <el-form-item label="活动类型" :label-width="formLabelWidth" prop="activityType">
                  <el-select v-model="historicalActivityForm.activityType" placeholder="请选择活动类型">
                    <el-option
                      v-for="item in activityTypeArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
              <tr>
                <td colspan="2">
                  <NavUeditor :config=ueConfig id="activityWonderful" ref="activityWonderfulUeditor"></NavUeditor>
                </td>
              </tr>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="dialogSubmit">确 定</el-button>
          </div>
          </el-dialog>
        </div>
      </div>
    </div>
</template>

<script>
  import NavUeditor from '../../NavUeditor/NavUeditor.vue'
  import ElButton from "../../../../../node_modules/element-ui/packages/button/src/button";
    //  此处导入组件,格式,例如:import xxx名称 from "路径"
    export default{
        // 这里是name,记得填写
        name: 'activityWonderful',
        //  数据定义
        data () {
            return {
//            当前页
              currentPage: 1,
//              新增回顾的当前页面
              ReviewActivityCurrentPage:1,
//            每页显示几条
              pageSize: 10,
//            总条目数
              total: 0,
//              新增回顾分页
              ReviewActivityTotal:0,
//                活动标题
              pageTitle: '活动管理-精彩回顾',
//              表格数据
              tableData: [],
//              新增发布的活动
              tableDataReviewActivity:[],
//            表格选中的数据
              tableDataChecked: null,
//              新增回顾列表选中数据
              ReviewActivityTableDataChecked:null,
//              新增页面
              addReleaseActivityForm:{},
//              定时器
              addReviewSetTimeOut:null,
//              编辑发布所需要的数据
              formLabelWidth: '120px',
              historicalActivityForm:{
                activityAddress:'',
                activityTitle: '',
                activityStartTime: '',
                activityEndTime: '',
                organization: '',
                activityType: '',
                activityId: '',
                activityContent: ''
              },
//              弹窗显示
              dialogHistoricalActivityFormVisible:false,
//              新增回顾列表
              dialogReviewActivityTableVisible:false,
//              新增回顾页面
              addReleaseActivityVisible:false,
//             弹窗所属组织下拉设定
              optionsOrganizationArr:[
                {value:'镇党委',label:'镇党委'},
                {value:'光辉村支部',label:'光辉村支部'}
              ],
//              活动类型下拉设定
              activityTypeArr:[
                {value:'主题党日',label:'主题党日'},
                {value:'志愿者活动',label:'志愿者活动'}
              ],
//              富文本编辑器配置
              ueConfig: {
                //可以在此处定义工具栏的内容
                toolbars: [[
                  'fullscreen',  '|', 'undo', 'redo', '|',
                  'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                  'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                  'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                  'directionalityltr', 'directionalityrtl', 'indent', '|',
                  'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                  'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                  'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'insertframe',  'webapp', 'pagebreak', 'template', 'background', '|',
                  'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                  'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                  'print', 'preview', 'searchreplace', 'help', 'drafts'
                ]],
                zIndex:3000,
                elementPathEnabled : false,// 隐藏下方的元素路径
                autoHeightEnabled: false,
                autoFloatEnabled: true,
                initialContent:'请输入内容',   //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
                autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
                initialFrameWidth: null,
                initialFrameHeight: 300,
                BaseUrl: '',
                UEDITOR_HOME_URL: 'static/ueditor/',
              },
            }

        },
      // 页面加载
        created(){
          // 查询展示的精彩回顾
          this.selectShowHistoryActivityList(1)
        },
        // 页面方法
        methods: {
          // 查询所有的精彩回顾
          selectShowHistoryActivityList(pageNum){
              let _this = this;
              this.$http.post(
                  this.$BASE_URL+'activity/selectalllookback',
                {pageNum:pageNum,pageSize:this.pageSize}
              ).then(res=>{
                let list = res.data.list;
                for(let i = 0; i < list.length; i++){
                    if(list[i].activityflag === 0){
                        list[i]['activitystatus'] = '展示中'
                    }else if(list[i].activityflag === 1){
                      list[i]['activitystatus'] = '已下架'
                    }
                }
                this.tableData = list;
                this.total = res.data.total;
                  console.log(res)
              },res=>{
                  console.error(res.data.resMessage)
              })
          },
          // 查询所有审核过的活动
          selectActivityWonderfulListByOidLimit(pageNum,organizationid){
              let _this = this;
                this.$http.post(
                    this.$BASE_URL+'activity/selectallby',
                  {pageNum:pageNum,pageSize:this.pageSize,organizationId:organizationid},{emulateJSON:false}
                ).then(res => {
                    console.log(res);
                  let isList = res.data.list;
                  for(let i = 0;i <isList.length;i++){
                      if (isList[i].activityflag === 1){
                        isList[i]['activitystatus'] = '审核通过'
                      }
                  }
                  this.tableDataReviewActivity = isList;
                  this.ReviewActivityTotal = res.data.total;
                },res => {

              })
            },
          // 新增回顾
          addReview(){
            this.dialogReviewActivityTableVisible = true;
            this.selectActivityWonderfulListByOidLimit(this.ReviewActivityCurrentPage,1)
          },
//          新增发布窗口关闭
          closeReviewActivityDialog(done){
            this.dialogReviewActivityTableVisible = false
          },
          closeInnerReviewActivityDialog(){
            this.$confirm('确认是否关闭？页面上的数据将不会被保留')
              .then(_ => {
                this.addReleaseActivityVisible = false
                done();
              })
              .catch(_ => {});
          },
          // 新增回顾按钮
          addReviewThisActivity(){
              if(!this.ReviewActivityTableDataChecked){
                this.$message.error('错误操作, 请选择一条数据在进行操作')
                return;
              }
            this.dialogReviewActivityTableVisible = false;
            this.addReviewSetTimeOut =  setTimeout(()=>{
              this.addReleaseActivityVisible = true;
              clearTimeout(this.addReviewSetTimeOut)
            },500);
          },
          // 新增回顾页面
          goBack(){
            this.addReleaseActivityVisible = false;
            this.addReviewSetTimeOut =  setTimeout(()=>{
              this.dialogReviewActivityTableVisible = true;
              clearTimeout(this.addReviewSetTimeOut)
            },500);
          },
          // 新增发布窗口 选中数据
          handleTableChangeReviewActivity(e){
            this.ReviewActivityTableDataChecked = e
          },
//          新增发布窗口分页
          handleReviewActivityCurrentChange(pageNum){
              this.selectActivityWonderfulListByOidLimit(pageNum,1)
          },
//            选中表格中的数据
          handleTableChange(e){
              this.tableDataChecked = e
          },
//          页面分页
          handleCurrentChange(pageNum){
              this.selectShowHistoryActivityList(pageNum)
          },
//          编辑发布
          editorialPublished(){
              if(!this.tableDataChecked){// 没有选中数据
                this.$notify.error({
                  title: '操作错误',
                  message: '请先选择一条数据,再进行编辑发布'
                });
                return;
              }
              this.dialogHistoricalActivityFormVisible = true
          },
//          取消发布
          cancelPublished(){
            if(!this.tableDataChecked){// 没有选中数据
              this.$notify.error({
                title: '操作错误',
                message: '请先选择一条数据,再进行取消发布'
              });
              return;
            }
//              询问框
            this.$confirm('此操作将让该活动恢复到下架状态,是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {// 点击确定
              this.$http.post(// 精彩回顾取消发布
                  this.$BASE_URL+'activity/updatelookback',
                {id:this.tableDataChecked.id},{emulateJSON:false}
              ).then(res => {
                  console.log(res);
                this.$message.success(res.data.resMessage);
              },res => {
                  this.$message.error(res.data.resMessage)
              });
            }).catch(() => {// 点击取消

            });
          },
//          编辑发布弹窗关闭
          closeDialog(done){
            console.log(this.historicalActivityForm)
            this.$confirm('确认是否关闭？页面上的数据将不会被保留')
              .then(_ => {
                this.$refs.form.resetFields();
                this.dialogHistoricalActivityFormVisible = false
                done();
              })
              .catch(_ => {});
          },
//          编辑发布确认提交
          dialogSubmit(){
              // 获取富文本内容
            let content = this.$refs.activityWonderfulUeditor.getUEContent();
            console.log(content)

            this.dialogHistoricalActivityFormVisible = false
            // 恢复富文本初始化状态
            this.$refs.activityWonderfulUeditor.setUEContent('<p>请输入内容</p>');
          }
        },
        // 计算属性
        computed: {},
        // 侦听器
        watch: {},
        // 依赖注入
        components: {
          ElButton,
          NavUeditor
        }
    }
</script>

<!-- 本地样式 -->
<style scoped>
  .activityWonderful{
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .activityWonderful-left-title{
    text-align: left;
    padding: 10px 20px;
  }
  .activity-title-line{
    height:1px;
    width: 98%;
    margin: auto 1%;
    background-color: #ddd;
  }
  .activity-div-button{
    text-align: left;
    width:100%;
    margin: 10px auto;
    background-color: #ffffff;
  }
  .activity-button{
    margin: 0 20px;
  }
  .activity-table{
    text-align: center;
    width:100%;
    display: flex;;
    justify-content: center;
    align-content: center;
    /*padding: 10px;*/
  }
</style>
